<template>
  <div class="subsequent_actions">
    <div class="h-32px flex justify-end mb-8px">
      <el-button type="primary" :icon="Plus" @click="openFrom('add')" size="small">新增</el-button>
    </div>
    <div class="table_box">
      <el-table :data="list" style="width: 100%" border height="100%">
        <el-table-column prop="listenDescribes" label="触发条件" align="center"> </el-table-column>
        <el-table-column prop="listenParamsDescribes" label="设置参数" align="center">
          <template #default="scope">
            {{ scope.row.listenParamsDescribes.map((item) => item.value).join(',') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="actionDescribes"
          label="执行动作"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag type="primary"> {{ scope.row.actionDescribes }}</el-tag>
            {{
              scope.row.actionParamsDescribes.map((item) => item.desc + ':' + item.value).join('-')
            }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.status == 0">开</el-tag>
            <el-tag type="danger" v-else>关</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="openFrom('update', scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" link @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
  <SubsequentFrom ref="subsequentRef" @success="getList" />
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import SubsequentFrom from './subsequent_from.vue'
import { listenActionPage, deleteListenAction } from '@/api/call/aiCall/index.ts'

const subsequentRef = ref(null)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  source: 'task',
  sourceId: ''
})

const list = ref([])
const total = ref(0)
const props = defineProps({
  activeItem: Object
})
const getList = async () => {
  const data = await listenActionPage(queryParams)
  list.value = data.list
  total.value = data.total
}

watch(
  () => props.activeItem,
  (val) => {
    if (val) {
      queryParams.sourceId = val.id
      queryParams.pageNo = 1
      getList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)

// 新建 编辑
const openFrom = (type, id) => {
  subsequentRef.value.open(type, id, props.activeItem.id)
}

const del = async (item) => {
  await ElMessageBox.confirm('确定要删除吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deleteListenAction(item.id)
  ElMessage.success('操作成功')
  queryParams.pageNo = 1
  getList()
}
</script>

<style lang="scss" scoped>
.subsequent_actions {
  width: 100%;
  height: 100%;
}
.table_box {
  height: calc(100% - 120px);
}
</style>
